<template>
	<view class="home pageBg">
		<!-- 头部 -->
		<header-nav title="推荐"></header-nav>
		<!-- 轮播 -->
		<view class="banner-wrapper">
			<swiper class="swiper" circular indicator-dots indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff">
				<swiper-item v-for="(item,index) in banner" :key="item._id">
					<image :src="item.picurl"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 公告 -->
		<view class="notice-wrapper">
			<view class="notice">
				<view class="left">
					<uni-icons class="icon" type="sound" size="24" ></uni-icons>
					<text class="font">公告</text>
				</view>
				<view class="content">
					<swiper class="swiper" autoplay vertical circular :interval="1000">
						<swiper-item v-for="item in notice" :key="item._id">{{item.title}}</swiper-item>
					</swiper>
				</view>
				<view class="right">
					<uni-icons type="right" size="20" color="#888"></uni-icons>
				</view>
			</view>
		</view>
		<!-- 每日推荐 -->
		<view class="recommend">
			<!-- 标题部分 -->
			<common-title>
				<template #name>
					<text class="name">每日推荐</text>
				</template>
				<template #right>
					<view class="right">
						<uni-icons class="icon" type="calendar" size="20" ></uni-icons>
						<text class="time">
							<uni-dateformat :date="new Date()" format="dd"></uni-dateformat>日					
						</text>
					</view>
				</template>
			</common-title>
			<!-- 滚动区域 -->
			<view class="scroll-wrapper">
				<scroll-view class="scroll" scroll-x>
					<view v-for="item in recommend" :key="item._id" class="img-wrapper" @click="gopreview(item._id)">
						<image class="img" :src="item.smallPicurl" mode="aspectFill"></image>
					</view>
					
				</scroll-view>
			</view>
		</view>
		<!-- 专题精选 -->
		<view class="choiceness">
			<!-- 标题部分 -->
			<common-title>
				<template #name>
					<text class="name">专题精选</text>
				</template>
				<template #right>
					<text class="more">More+</text>
				</template>
			</common-title>
			<!-- 内容部分 -->
			<view class="content">
				<each-item v-for="item in classList" :item="item" :key="item._id"></each-item>
				<each-item :isMore="true"></each-item>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref,onMounted } from 'vue';
import {onShareAppMessage,onShareTimeline} from '@dcloudio/uni-app'
import {apiGetBanner,apiGetWallNewsList,apiGetRandomWall,apiGetClassify} from '@/api/index.js'



onMounted(()=>{
	getBannerList()
	getNoticeList()
	getRecommend()
	getClassList()
})

//轮播图
const banner = ref([])
const getBannerList = async()=>{
	let res = await apiGetBanner()
	banner.value = res.data
}

//公告
const notice = ref([])
const getNoticeList = async()=>{
	let res = await apiGetWallNewsList({select:true})
	notice.value = res.data
}

//每日推荐
const recommend = ref([])
const getRecommend = async()=>{
	let res = await apiGetRandomWall()
	recommend.value = res.data
}
const gopreview = (id)=>{
	uni.setStorageSync("classList",recommend.value);
	uni.navigateTo({
		url:'/pages/preview/preview?id='+id
	})
}

//专题精选

const classList = ref([])
const getClassList = async()=>{
	let res = await apiGetClassify({select:true})
	classList.value = res.data
}

//分享给好友
onShareAppMessage((e)=>{
	return {
		title:"咸虾米壁纸，好看的手机壁纸",
		path:"/pages/classify/classify"
	}
})

//分享朋友圈
onShareTimeline(()=>{
	return {
		title:"咸虾米壁纸，好看的手机壁纸"
	}
})
</script>

<style lang="scss" scoped>
.home{
	width: 100%;
	//轮播
	.banner-wrapper{
		width: 100%;
		padding: 30rpx ;
		box-sizing: border-box;
		.swiper{
			width: 100%;
			height: 340rpx;
			swiper-item{
				width: 100%;
				height: 100%;
				image{
					width: 100%;
					height: 100%;
					border-radius: 12rpx;
				}
			}
		}
	}
	//公告
	.notice-wrapper{
		width: 100%;
		padding:0 30rpx 30rpx;
		box-sizing: border-box;
		
		.notice{
			width: 100%;
			height: 80rpx;
			display: flex;
			align-items: center;
			background: #f9f9f9;
			border-radius: 40rpx;
			
			.left{
				width: 140rpx;
				margin-left: 30rpx;
				display: flex;
				align-items: center;
				.icon{
					font-weight: bold;
					color: $brand-theme-color !important;
				}
				:deep(){
					.uni-icons{
						color: $brand-theme-color !important;
					}
				}
				.font{
					color: $brand-theme-color;
					font-size: 28rpx;
					margin-left: 6rpx;
					font-weight: bold;
				}
			}
			.content{
				flex: 1;
				height: 80rpx;
				.swiper{
					width: 100%;
					height: 100%;
					swiper-item{
						width: 100%;
						height: 100%;
						line-height: 80rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						color: #585858;
					}
				}
			}
			.right{
				width: 60rpx;
			}
		}
	}
	//每日推荐
	.recommend{
		width: 100%;
		.name{
			font-size: 40rpx;
		}
		.right{
			display: flex;
			align-items: center;
			.icon{
				color: $brand-theme-color !important;
			}
			:deep(){
				.uni-icons{
					color: $brand-theme-color !important;
				}
			}
			.time{
				margin-left: 8rpx;
				color: $brand-theme-color;
				font-size: 28rpx;
			}
		}
		.scroll-wrapper{
			width: 100%;
			margin-left: 30rpx;
			margin-bottom: 30rpx;
			.scroll{
				width: calc(100% - 30rpx);
				display: flex;
				white-space: nowrap;
				.img-wrapper{
					display: inline-block;
					width: 200rpx;
					height: 430rpx;
					margin-right: 15rpx;
					.img{
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
				}
				.img-wrapper:last-child{
				  margin-right: 30rpx;
				}
			}
		}
	}
	//专题精选
	.choiceness{
		margin-bottom: 30rpx;
		.name{
			font-size: 40rpx;
		}
		.more{
			font-size: 30rpx;
			color: #838383;
		}
		.content{
			width: 690rpx;
			margin: 0 auto;
			display: grid;
			grid-template-columns: repeat(3,1fr);
			gap: 15rpx;
		}
	}
	
}
</style>

